.floor-layout {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
/deep/ {
  .mask-floor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    border: 1px dashed #ccc;
  }
  .mask-bg-floor {
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
  }
  .mask-btn-floor {
    position: absolute;
    z-index: 4;
    top: 5px;
    right: 5px;
    font-size: 12px;
    color: rgb(0, 0, 0);
    box-shadow: rgba(0, 0, 0, 0.5) 0 0 2px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 2px;
    padding: 3px 5px;
    outline: none;
    cursor: pointer;
    &:focus { outline: none }
    .svg-icon { margin-right: 3px }
  }
  .layout-main {
    position: relative;
    width: 100%;
    height: 100%;
    clear: both;
  }
  .layout-item {
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
    height: 100%;
    &:hover .mask-bg-floor { display: block }
    img {
      width: 100%;
      height: 100%;
    }
    .no-image {
      width: 100%;
      height: 100%;
      background: url("") no-repeat center;
      background-size: auto 75%;
    }
  }
  .left, .right {
    width: 50%;
    height: 100%;
    float: left;
  }
  .left .mask-floor { border-right: none }
  .right { float: right }
  .top .mask-floor, .middle .mask-floor { border-bottom: none }
  @mixin layout-item-neighbor {
    .layout-item + .layout-item .mask-floor{ border-left: none }
  }

  // tpl-23 单列单张大图模块
  .tpl-23 {
    height: 130px;
  }
  // tpl-24 左一右二图片模块
  .tpl-24 {
    height: 130px;
    .right .layout-item { height: 50% }
  }
  // tpl-25 左二右一图片模块
  .tpl-25 {
    height: 130px;
    .left .layout-item { height: 50% }
  }
  // tpl-26 左二右一图片模块
  .tpl-26 {
    height: 130px;
    .layout-item {
      float: left;
      width: percentage(1/3)
    }
    @include layout-item-neighbor;
  }
  // tpl-27 五列单行小图模块
  .tpl-27 {
    height: 64px;
    .layout-item {
      float: left;
      width: percentage(1/5);
    }
    @include layout-item-neighbor;
  }
  // tpl-28 轮播图模块
  .tpl-28 {
    height: 150px;
    .swiper-container {
      width: 100%;
      height: 100%;
    }
  }
  // tpl-29 四列单行图片模块
  .tpl-29 {
    @extend .tpl-27;
    height: 105px;
    .layout-item { width: percentage(1/4) }
    .no-image { background-size: 70% }
  }
  // tpl-30 标题或间隔性模块
  .tpl-30 {
    height: 40px;
    .no-image { background-size: 17.5% 75% }
  }
  // tpl-31 四列单行小图片模块
  .tpl-31 {
    @extend .tpl-29;
    height: 80px;
  }
  // tpl-32 左一右二竖排模板
  .tpl-32 {
    height: 125px;
    .layout-item { width: 50%; float: left }
    .left .layout-item { width: 100% }
    .right .no-image {
      background-size: 75% auto;
    }
  }
  // tpl-37 商品模块
  .tpl-37 {
    //height: 242px;
    margin-top: 10px;
    .layout-main {
      display: flex;
      justify-content: space-around;
    }
    .layout-item {
      width: 47%;
      height: 100%;
    }
    .image-goods {
      position: relative;
      width: 100%;
      &:before {
        content: "";
        display: inline-block;
        padding-bottom: 100%;
        width: .1px;
        vertical-align: middle;
      }
      img {
        position: absolute;
        width: 100%;
        height: 100%;
      }
    }
    .name-goods {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      min-height: 36px;
    }
    .price-goods {
      color: #f42424;
      margin-top: 5px;
      padding-top: 5px;
      border-top: 1px dashed #ccc;
    }
  }
  // tpl-42 文本模块
  .tpl-42 {
    height: 40px;
    .layout-item {
      line-height: 40px;
      padding: 0 10px;
    }
  }
}
